import React, {FC, useEffect, useState} from "react";
import {Button, Form, Input, message, Modal, Popconfirm, Table, Tooltip} from "antd";
import {inject, observer} from "_mobx-react@6.3.1@mobx-react";
import api from "../../../api";
import BreadcrumbPath from "../../../components/BreadcrumbPath";


const Subject: FC<any> = ({MobxData}) => {
    const [dataSource, setDataSource] = useState<Array<any>>([]);
    const {subjectList, getSubjectList, changeSubjectList} = MobxData;
    // 对话框是否可见
    const [isModalVisible, setIsModalVisible] = useState(false);
    // 对话框title
    const [ModalTitle, setModalTitle] = useState("");
    const [form] = Form.useForm();

    const columns = [
        {
            title: '学科名称',
            dataIndex: 'name',
            key: 'name',
            width: 'auto',
        },
        {
            title: '学科标识',
            dataIndex: 'value',
            key: 'value',
            width: 'auto',
        },
        {
            title: '学科介绍',
            dataIndex: 'introduce',
            key: 'introduce',
            width: 'auto',
            ellipsis: {
                showTitle: false,
            },
            render: (introduce: any) => (
                <Tooltip placement="topLeft" title={introduce}
                         overlayInnerStyle={{maxHeight: "200px", overflowY: "auto"}}>
                    {introduce}
                </Tooltip>
            ),
        },
        {
            title: '操作',
            key: 'action',
            width: '200px',
            render: (text: any, record: any, index: any) => {
                return (
                    <div style={{color: "#409eff"}}>
                    <span style={{margin: "0 10px", cursor: "pointer"}} onClick={() => {
                        setModalTitle("编辑学科");
                        form.setFieldsValue(record)
                        setIsModalVisible(true);
                    }}>修改</span>
                        <Popconfirm
                            title="确定要删除吗?"
                            onConfirm={() => {
                                // console.log("删除", record.key);
                                // 删除学科
                                api.delSubject({id: record.key}).then(res => {
                                    message.success(res.msg);
                                }).catch(err => {
                                    message.error(err.msg);
                                })
                                getSubjectList()
                            }}
                            okText="确定"
                            cancelText="取消"
                        >
                            <span style={{margin: "0 10px", cursor: "pointer"}}>删除</span>
                        </Popconfirm>
                    </div>
                )
            }
        }
    ];
    useEffect(() => {
        getSubjectList();
    }, [])
    useEffect(() => {
        // 拼装表格数据
        setDataSource(subjectList.map((item: any) => ({
            key: item._id,
            name: item.name,
            value: item.value,
            introduce: item.introduce
        })))
    }, [subjectList])

    const handleOk = () => {
        // 验证表单
        form.validateFields().then(values => {
            if (ModalTitle === "编辑学科") {
                values.id = form.getFieldValue("key")
                // console.log(values);
                // 更新学科
                api.upSubject(values).then(res => {
                    message.success(res.msg);
                }).catch(err => {
                    message.error(err.msg);
                })
            } else if (ModalTitle === "添加学科") {
                // console.log(values);
                // 添加学科
                api.addSubject(values).then(res => {
                    message.success(res.msg);
                }).catch(err => {
                    message.error(err.msg);
                })
            }
            getSubjectList();
            setIsModalVisible(false);
        }).catch(err => {
        })
    }

    return (
        <div>
            {/*<h1>学科管理</h1>*/}
            <BreadcrumbPath/>
            <Button type="primary" size="large" onClick={() => {
                setModalTitle("添加学科");
                form.setFieldsValue({
                    name: "",
                    value: "",
                    introduce: ""
                })
                setIsModalVisible(true);
            }}>添加学科</Button>
            <Table dataSource={dataSource} columns={columns} sticky
                   pagination={{
                       pageSize: 8,
                       hideOnSinglePage: true,
                       responsive: true,
                       position: ["bottomCenter"],
                       showQuickJumper: true
                   }}/>
            <Modal title={ModalTitle} okText="提交" cancelText="取消" visible={isModalVisible} onOk={handleOk}
                   onCancel={() => {
                       setIsModalVisible(false)
                   }}>
                <Form
                    name="basic"
                    form={form}
                    layout='vertical'
                >
                    <Form.Item
                        label="学科名称"
                        name="name"
                        rules={[{required: true, message: '学科名称不能为空!'}]}
                    >
                        <Input placeholder="请输入学科名称"/>
                    </Form.Item>
                    <Form.Item
                        label="学科标识"
                        name="value"
                        rules={[{required: true, message: '学科标识不能为空!'}]}
                    >
                        <Input placeholder="请输入学科标识"/>
                    </Form.Item>
                    <Form.Item
                        label="学科介绍"
                        name="introduce"
                        rules={[{required: true, message: '学科介绍不能为空!'}]}
                    >
                        <Input.TextArea placeholder="请输入学科介绍" rows={4} allowClear autoSize showCount/>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}
export default inject('MobxData')(observer(Subject));
